<template>
  <div>
    <!-- 头部导航 -->
    <el-row class="top">
      <el-col :span="2"><div class="grid-content bg-purple" @click="home">网站首页</div></el-col>
      <el-col :span="15"><div class="grid-content bg-purple-light" @click="home">鲜花网站</div></el-col>
      <el-col :span="2"><div class="grid-content bg-purple" @click="goto">退出登录</div></el-col>
      <el-col :span="2"><div class="grid-content bg-purple-light" @click="admin">admin</div></el-col>
      <el-col :span="2"><div class="grid-content bg-purple-light">购物车</div></el-col>
    </el-row>

    <!-- 购物清单 -->
    <div class="title">
      <div class="p">购物清单</div>
      <div class="spxx">
        <el-checkbox v-model="checkAll"></el-checkbox>
        <div class="xx">
          <span>商品信息</span>
          <div class="right">
            <div>单价</div>
            <div>数量</div>
            <div>小计</div>
            <div>删除</div>
          </div>
        </div>
      </div>
      <!-- 每一个商品 -->
      <div class="spxx" v-for="(item,index) in list" :key="index">
        <el-checkbox v-model="item.ckd"></el-checkbox>
        <div class="xx">
          <span><img :src=" item.item.url" width="100px" height="100px"></span>
          <div class="right">
            <div>￥{{ item.item.price}}</div>
            <div>
              <el-input-number @change="changeNum(item.num)" :min="1" size="mini" v-model="item.num"></el-input-number>
            </div>
            <div>￥{{ item.item.price*item.num }}</div>
            <div class="delete" @click="del(index)">删除</div>
          </div>
        </div>
      </div>

      <div class="bottom" style="float:right">
        <span>总计 <a class="a">{{ $store.getters.number }}</a></span>
        <span>应付金额 <a class="a">{{ $store.getters.total }}</a></span>
        <el-button type="primary" @click="dels">现在结算</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import {mapMutations} from 'vuex'
  export default{
    name:"shoppingcart",
    data(){
      return {
        num: 1,   //商品数量
        price:165,    //商品价格
        list: this.$store.state.cartList,   // 购物车数据
      }
    },
    computed:{
      checkAll:{
        get(){
          if (this.list.length == 0) {
            return false
          }
          return this.$store.state.cartList.every(item => {
            return item.ckd == true
          })
        },
        set(newVal) {
          this.$store.commit('ckd', newVal)
        },
      }
    },
    methods:{
      /* 向shop组件跳转 */
      home(){
        this.$router.push('/shop')
      },
      /* 向admin组件跳转 */
      admin(){
        this.$router.push('/admin')
      },
      /* 退出登录事件 */
      goto(){
        this.$confirm('是否退出登录？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '退出成功!',
          });
          this.$router.push('/')
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消退出'
          });
        });
      },
      /* 删除商品事件 */
      del(index) {
      this.$confirm('是否删除该商品？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!',
        });
        this.$store.commit('del', index)
      }).catch(() => {

      });
    },
    /* 结算商品事件 */
    dels(){
      this.$confirm('是否结算全部商品？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '结算成功!',
        });
        this.$store.commit('dels',0)
      }).catch(() => {

      });
    },
    ...mapMutations(['changeNum'])
    },
  }
</script>

<style scoped>
  .top{
    height: 40px;
    background: rgb(191, 124, 138);
    color: #ffe9ec;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .title{
    margin: 40px;
    border: 1px solid #000;
    border-radius: 10px;
  }
  .p{
    padding: 20px 20px 10px 20px;
  }
  .spxx{
    padding: 5px 20px;
    font-size: 14px;
    display: flex;
    align-items: center;
    /* background: rgb(71,191,132); */
  }
  .xx{
    width: 100%;
    display: flex;
    justify-content: space-between;
  }
  .xx span{
    margin-left: 50px;
  }
  .right{
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .right div{
    display: flex;
    justify-content: center;
    width: 120px;
    height: 40px;
  }
  .delete{
    color: #b38590;
  }
  .youhui{
    padding: 10px 20px;
  }
  .youhui button{
    border-radius: 5px;
    margin-left: 10px;
  }
  .a{
    color: red;
  }
  .bottom{
    display: flex;
    justify-content: right;
    align-items: center;
    padding: 0 60px 20px 0;
  }
  .bottom span{
    margin-right: 20px;
  }
</style>